<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="main_floatBar" th:fragment="main_floatBar">
    <!--侧边框-->
    <div class="float_bar" id="float_bar_site">
        <div class="float_bar_inner">
            <div class="float_bar_over_wrapp">
                <!-- 博文展示 -->
                <div class="sidebar_block float_sidebar_widget">
                    <div class="widget_recent_image">
                        <h4 class="widget_title">最新博客展示</h4>
                        <div class="widget_recent_post">
                            <ul id="floatBar_post_ul">
                                <!-- 侧边展示最新发布的博客 limit 4-->
                            </ul>
                        </div>
                    </div>
                </div>

                <!--图片循环-->
                <div class="sidebar_block float_sidebar_widget">
                    <h4 class="widget_title">美图分享</h4>
                    <div class="instagram-fee">
                        <ul class="instagram-pics instagram-size-thumbnail" id="floarBar_articleCover_ul">
                            <!-- 图片展示 -->
                        </ul>
                    </div>
                </div><!--END Widhet-->

                <!--寄语-->
                <div class="sidebar_block float_sidebar_widget">
                    <h4 class="widget_title">寄 语</h4>
                    <div class="widget_search">
                        <p style="font-size: 16px;text-align: center;">“绿阴生昼静，春去夏犹清”</p>
                    </div>
                </div><!--END Widhet-->

                <!--分类循环-->
                <div class="sidebar_block float_sidebar_widget widget_categories">
                    <h4 class="widget_title">分类</h4>
                    <ul id="floatBar_category_ul">
                        <!-- 分类展示 -->
                    </ul>
                </div><!--END Widhet-->
            </div>
            <button class="close_float_sidebar" data-target="#float_bar_site" type="button">
                <i class="navbar-toggler-icon"><i class="icon-delete-cross"></i></i>
            </button>
        </div>
        <div class="cover_float_sidebar" data-target="#float_bar_site"></div>
    </div>
    <!--END Float Sidebar-->
    <script th:inline="javascript">
        $(function () {
            //请求最新的四条博文
            $.ajax({
                async: true,//异步请求
                url: "/queryArticleModelLimit4",//请求url
                type: "get",//get方式
                success: function (data) {
                    //成功的回调
                    $.each(data, function (i, item) {
                        //年，截取字符串
                        var year = item.articleDate.substring(0, 4);
                        // console.log("year====" + year);
                        //月，截取字符串
                        var tempMonth = item.articleDate.substring(5, 7);
                        // console.log("tempMonth====" + tempMonth);
                        //月，转换为大写
                        var month = "";
                        switch (tempMonth) {
                            case "01":
                                month = "一月";
                                break;
                            case "02":
                                month = "二月";
                                break;
                            case "03":
                                month = "三月";
                                break;
                            case "04":
                                month = "四月";
                                break;
                            case "05":
                                month = "五月";
                                break;
                            case "06":
                                month = "六月";
                                break;
                            case "07":
                                month = "七月";
                                break;
                            case "08":
                                month = "八月";
                                break;
                            case "09":
                                month = "一九月";
                                break;
                            case "10":
                                month = "十月";
                                break;
                            case "11":
                                month = "十一月";
                                break;
                            case "12":
                                month = "十二月";
                                break;
                        }
                        // console.log("month==========="+month)
                        //日，截取字符串
                        var day = item.articleDate.substring(8, 11);
                        // console.log("day====" + day);
                        var $post_li = $(
                            "<li>" +
                            "<div class='post_thumb'>" +
                            "<a href='/single/" + item.articleId + "'>" +
                            "<img src='" + item.articleCover + "'>" +
                            "</a>" +
                            "</div>" +
                            "<h6 class='post_name'>" +
                            "<a href='/single/" + item.articleId + "' style='overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;'>" + item.articleTitle + "</a>" +
                            "</h6>" +
                            "<div class='post_data_recent'>" +
                            "<div class='post_data'>" +
                            "<i class='fas fa-clock'></i>" + month+" "+day+","+year +
                            "</div>" +
                            "</div>" +
                            "</li>"
                        )
                        $("#floatBar_post_ul").append($post_li);
                    })
                }
            })
            //请求分类
            $.ajax({
                async: true,
                url: "/queryAllCategory",
                type: "get",
                success: function (data) {
                    $.each(data, function (i, item) {
                        var $category_li=(
                            "<li style=\"height: 20px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;\"><a href='/category_subpage/" + item.categoryId + "' title='" + item.categoryName + "'>"+item.categoryName+"</a></li>"
                        )
                        $("#floatBar_category_ul").append($category_li);
                    })
                }
            })
            //请求美图
            $.ajax({
                async : true,
                url : "/queryArticleModelByViewLimit8",
                type : "get",
                success:function (data) {
                    $.each(data, function (i, item) {
                        var $articleCover_li = (
                            "<li style='height: 124px;overflow: hidden'>" +
                                "<a style='height: 100%'>" +
                                    "<img style='height: 100%;width: 100%;object-fit: cover;' src='"+item.articleCover+"'>" +
                                "</a>" +
                            "</li>"
                        )
                        $("#floarBar_articleCover_ul").append($articleCover_li);
                    })
                }
            })
        })
    </script>
</div>
</body>
</html>